<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>太阳能发电系统实时监控 - 设置</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/setting.css">
  <!-- 引入字体图标库 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css">
</head>
<body>
  <div id="app">
    <!-- 主容器 -->
    <div class="solar-app">
      <!-- 顶部导航栏 -->
      <header class="app-header">
        <div class="app-title">
          <!-- <img src="assets/透明底Logo.png" alt="太阳能发电监控系统" class="app-logo"> -->
          <h1>独立式家庭供电自发自用系统</h1>
        </div>
        <div class="last-update">最后更新: {{ lastUpdateTime }}</div>
      </header>

      <!-- 导航菜单 -->
      <div class="nav-menu">
        <div class="nav-item" data-page="index">
          <i class="fas fa-tachometer-alt"></i>
          <div>仪表盘</div>
        </div>
        <div class="nav-item" data-page="weather">
          <i class="fas fa-cloud-sun"></i>
          <div>天气</div>
        </div>
        <div class="nav-item" data-page="statistics">
          <i class="fas fa-chart-bar"></i>
          <div>统计</div>
        </div>
        <div class="nav-item" data-page="settings">
          <i class="fas fa-cog"></i>
          <div>设置</div>
        </div>
      </div>

      <!-- 设置列表 -->
      
      <!-- 通用设置 -->
      <div class="settings-section">通用设置</div>
      <div class="settings-list">
        <div class="settings-item">
          <div class="settings-icon">
            <i class="fas fa-sync-alt"></i>
          </div>
          <div class="settings-content">
            <div class="settings-title">自动刷新</div>
            <div class="settings-desc">每隔一段时间自动更新数据</div>
          </div>
          <div class="settings-right">
            <label class="toggle-switch">
              <input type="checkbox" :checked="settingsData.autoRefresh" @change="toggleAutoRefresh" title="开启或关闭自动刷新" aria-label="自动刷新">
              <span class="toggle-slider"></span>
            </label>
          </div>
        </div>
        
        <div class="settings-item" v-if="settingsData.autoRefresh">
          <div class="settings-icon">
            <i class="fas fa-clock"></i>
          </div>
          <div class="settings-content">
            <div class="settings-title">刷新间隔</div>
            <div class="settings-desc">数据自动更新间隔时间（秒）</div>
          </div>
          <div class="settings-right">
            <div class="value-selector">
              <button class="selector-btn" @click="changeRefreshInterval(-10)" title="减少10秒">-</button>
              <span class="selector-value">{{ settingsData.refreshInterval }}</span>
              <button class="selector-btn" @click="changeRefreshInterval(10)" title="增加10秒">+</button>
            </div>
          </div>
        </div>
        
        <div class="settings-item">
          <div class="settings-icon">
            <i class="fas fa-moon"></i>
          </div>
          <div class="settings-content">
            <div class="settings-title">暗色模式</div>
            <div class="settings-desc">降低亮度，保护眼睛</div>
          </div>
          <div class="settings-right">
            <label class="toggle-switch">
              <input type="checkbox" :checked="settingsData.darkMode" @change="toggleDarkMode" title="开启或关闭暗色模式" aria-label="暗色模式">
              <span class="toggle-slider"></span>
            </label>
          </div>
        </div>
        
        <div class="settings-item">
          <div class="settings-icon">
            <i class="fas fa-bell"></i>
          </div>
          <div class="settings-content">
            <div class="settings-title">通知提醒</div>
            <div class="settings-desc">接收系统异常和提醒通知</div>
          </div>
          <div class="settings-right">
            <label class="toggle-switch">
              <input type="checkbox" :checked="settingsData.notificationsEnabled" @change="toggleNotifications" title="开启或关闭通知提醒" aria-label="通知提醒">
              <span class="toggle-slider"></span>
            </label>
          </div>
        </div>
      </div>
      
      <!-- 发电设置 -->
      <div class="settings-section">发电设置</div>
      <div class="settings-list">
        <div class="settings-item">
          <div class="settings-icon">
            <i class="fas fa-battery-full"></i>
          </div>
          <div class="settings-content">
            <div class="settings-title">每日发电目标</div>
            <div class="settings-desc">设置每日期望发电量（度）</div>
          </div>
          <div class="settings-right">
            <div class="value-selector">
              <button class="selector-btn" @click="changeDailyTarget(-1)" title="减少1度">-</button>
              <span class="selector-value">{{ settingsData.dailyTargetValue }}</span>
              <button class="selector-btn" @click="changeDailyTarget(1)" title="增加1度">+</button>
            </div>
          </div>
        </div>
        
        <div class="settings-item">
          <div class="settings-icon">
            <i class="fas fa-thermometer-half"></i>
          </div>
          <div class="settings-content">
            <div class="settings-title">温度单位</div>
            <div class="settings-desc">选择温度显示单位</div>
          </div>
          <div class="settings-right">
            <div @click="toggleTemperatureUnit" style="cursor: pointer;">
              {{ settingsData.temperatureUnit === 'celsius' ? '摄氏度 (°C)' : '华氏度 (°F)' }}
              <i class="fas fa-chevron-right" style="margin-left: 5px; color: #ccc;"></i>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 重置按钮 -->
      <button class="btn-block btn-danger" @click="showResetConfirmation" title="重置所有设置">
        恢复默认设置
      </button>
      
      <!-- 版本信息 -->
      <div class="version-info">
        <div>版本: {{ appVersion }}</div>
        <div>构建日期: {{ buildDate }}</div>
      </div>
    </div>

    <!-- 系统报警弹窗 -->
    <div class="alert-overlay" v-if="showAlert">
      <div class="alert-content">
        <div class="alert-icon">
          <i class="fas fa-exclamation-triangle"></i>
        </div>
        <h3>系统报警</h3>
        <p>{{ alertMessage }}</p>
        <button class="alert-btn" @click="acknowledgeAlert" title="确认报警">我知道了</button>
      </div>
    </div>
    
    <!-- 保存成功提示弹窗 -->
    <div class="toast-overlay" v-if="savedMessage">
      <div class="toast-content">
        <i class="fas fa-check-circle"></i>
        <span>{{ savedMessage }}</span>
      </div>
    </div>
    
    <!-- 重置确认对话框 -->
    <div class="dialog-overlay" v-if="showConfirmReset">
      <div class="dialog-content">
        <h3>确认重置设置?</h3>
        <p>这将会把所有设置恢复到默认值，此操作无法撤销</p>
        <div class="dialog-buttons">
          <button class="cancel-btn" @click="cancelReset" title="取消操作">取消</button>
          <button class="confirm-btn" @click="confirmReset" title="确认重置">确认</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 引入必要的JS库 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="js/common.js"></script>
  <script src="js/setting.js"></script>
</body>
</html>